// 跳转到关于页

// 路由传参
// 1. searchParams [查询字符串参数]
// 步骤:
// 1. 跳转拼接参数 navigate('/about?id=1011&name=cp')
// 2. 获取路由参数 useSearchParams() -> [params] -> params.get('id')

// 2. params传参
// 步骤:
// 1. 先在配置路由对应关系的path的地方做一个参数占位
// 2. 跳转的时候拼接参数 navigate('/about/1001')
// 3. 获取参数  useParams() -> params[包含所有的参数] -> params.id

import { useNavigate } from 'react-router-dom'

// 1. 导入一个路由钩子函数 useNavigate 必须在组件内执行

const Home = () => {
  // 2. 执行这个函数得到一个用来跳转的新函数
  const navigate = useNavigate()
  return (
    <div>
      {/* 3. 想要跳转到哪里 就把目标路由的路径放到参数的位置 */}
      this is Home
      {/* <button onClick={() => navigate('/about?id=1011')}>jump</button> */}
      <button onClick={() => navigate('/about/1001')}>jump</button>
    </div>
  )
}

export default Home
